<template>
	<view class="detail-page">
		<view class="hander yu-flex yu-flex-col">
			<!-- <view class="title">
				{{lessionName + '课程分类'}}
			</view> -->
			<view class="check-box">
				<picker @change="CheckedLesson" :value="lessonIndex" range-key="typename" :range="LessionTypelist">
					<view class="checktype yu-flex" v-if="LessionTypelist.length> 0">
						<text>类型：</text>
						<text>{{LessionTypelist[lessonIndex].typename}}</text>
						<image src="../../static/select.png" style="width: 30rpx;height: 30rpx;" mode="scaleToFill"></image>
					</view>
				</picker>
				<picker @change="CheckedCard" :value="cardIndex" range-key="cardname" :range="CardsTypelist">
					<view class="checktype yu-flex" v-if="CardsTypelist.length> 0">
						<text>卡：</text>
						<text>{{CardsTypelist[cardIndex].cardname}}</text>
						<image src="../../static/select.png" style="width: 30rpx;height: 30rpx;" mode="scaleToFill"></image>
					</view>
				</picker>
			</view>
		</view>
		<view style="height: 110rpx;"></view>
		<nodate v-if="lessionList.length<1" />
		<scroll-view scroll-y="true" v-else>
			<u-card margin="20rpx 0" v-for="(e,i) in lessionList" :key="i" :show-foot="false">
				<view class="u-flex u-row-between" slot="head">
					<text class="u-line-1 u-font-34 yu-bold" style="width: 80%;">{{e.lessionname}}-{{e.typename}}-{{e.cardname}}</text>
					<u-tag :text="e.times + '节课'" mode="plain" type="info"/>
				</view>
				<view class="u-flex u-row-between" slot="body">
					<view class="">
						<u-icon name="info-circle-fill" size="34" color="#ff9900" :label="e.cardinfo"></u-icon>
						<view style="height: 30rpx;"></view>
						<u-icon name="info-circle-fill" size="34" color="#ff9900" :label="e.typeinfo"></u-icon>
					</view>
					<view class="">
						<u-icon name="rmb" size="30" color="red" label-size="40" :label="e.price"></u-icon>
						<view style="height: 30rpx;"></view>
						<u-button size="mini" type="warning" :ripple="true" ripple-bg-color="#909399" @click="save(e.id)">提交报名</u-button>
					</view>
				</view>
			</u-card>
		</scroll-view>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: false,
				lessionId: '',
				lessionName: '',
				lessonIndex: 0,
				cardIndex: 0,
				heji: '0',
				LessionTypelist: [],
				CardsTypelist: [],
				typeId: '',
				cardId: '',
				lessionList: '',
				ppid: ''
			};
		},
		onLoad(option) {
			this.lessionId = option.id
			this.lessionName = option.name
			this.getLessionType()
		},
		computed: {
			saveData() {
				if (this.LessionTypelist.length > 0 && this.CardsTypelist.length > 0) {
					return {
						lessionid: this.lessionId,
						typeid: this.LessionTypelist[this.lessonIndex].typeid,
						cardid: this.CardsTypelist[this.cardIndex].cardid
					}
				}
				return false
			}
		},
		methods: {
			check(val) {
				this.heji = val
				console.log(val, 555);
			},
			save (id) {
				uni.showModal({
					title: '提示',
					content: '确定报名课程？',
					success: (res) => {
						if (res.confirm) {
							this.delitem(id)
						} else if (res.cancel) {
						}
					}
				});
			},
			delitem(id) {
				this.loading = true
				uni.showLoading({
					title: '提交中...'
				});
				uni.request({
					method: 'POST',
					url: this.$api.json('baseUrl') + '/lession/h5takeEffect',
					data: {
						id: id
					},
					success: (res) => {
						uni.hideLoading()
						if (res.data.resultCode === '000000') {
							uni.showToast({
								title: '提交成功！',
								duration: 1000,
								icon: 'success',
								success: () => {
									setTimeout(() => {
										this.loading = true
										uni.redirectTo({
											url: '/pages/myClass/myClass'
										})
										uni.hideToast()
									}, 1000)

								}
							});
						} else if (res.data.resultCode === '200009') {
							uni.navigateTo({
								url: '/pages/login/login'
							})
						} else {
							this.loading = false
							this.$api.msg(res.data.resultInfo || res.errMsg);
						}
					}
				})
			},
			CheckedLesson(val) {
				this.lessonIndex = val.detail.value
				this.getPrice()
			},
			CheckedCard(val) {
				this.cardIndex = val.detail.value
				this.getPrice()
			},
			// h5课程列表--类别       /lession/h5findTypes  无参数  返回列/表 /lession/findLessionTypes
			getLessionType() {
				uni.request({
					method: 'POST',
					url: this.$api.json('baseUrl') + '/lession/h5findLessionTypes',
					success: (res) => {
						uni.hideLoading()
						if (res.data.resultCode === '000000') {
							this.LessionTypelist = res.data.data
							this.LessionTypelist.unshift({
								typename: '全部',
								typeid: ''
							})
							this.getCardsType()
						} else if (res.data.resultCode === '200009') {
							uni.navigateTo({
								url: '/pages/login/login'
							})
						} else {
							this.$api.msg(res.errMsg);
						}
					}
				})
			},
			// h5课程列表--卡种      /lession/h5findCards  无参数   返回列表
			getCardsType() {
				uni.request({
					method: 'POST',
					url: this.$api.json('baseUrl') + '/lession/h5findLessionCards',
					success: (res) => {
						console.log(res);
						uni.hideLoading()
						if (res.data.resultCode === '000000') {
							this.CardsTypelist = res.data.data
							this.CardsTypelist.unshift({
								cardname: '全部',
								cardid: ''
							})
							this.getPrice()
						} else if (res.data.resultCode === '200009') {
							uni.navigateTo({
								url: '/pages/login/login'
							})
						} else {
							this.$api.msg(res.errMsg);
						}
					}
				})
			},
			getPrice() {
				uni.request({
					method: 'POST',
					url: this.$api.json('baseUrl') + '/lession/h5findLessionTypeCard   ',
					data: this.saveData,
					success: (res) => {
						console.log(res, 222);
						if (res.data.resultCode === '000000') {
							this.lessionList = res.data.data
						} else if (res.data.resultCode === '200009') {
							uni.navigateTo({
								url: '/pages/login/login'
							})
						} else {
							this.$api.msg(res.data.resultInfo || res.errMsg);
						}
					}
				})
			}

		}
	}
</script>

<style lang="less">
	.detail-page {
		padding: 0 20rpx;
		.hander {
			width: 100%;
			background-color: #fff;
			position: fixed;
			top: 89rpx;
			left: 0;
			padding: 20rpx;
			box-sizing: border-box;
			z-index: 3;

			.title {
				text-align: center;
				font-size: 40rpx;
				font-weight: 700;
				margin-bottom: 20rpx;
			}

			.check-box {
				width: 100%;
				display: flex;
				justify-content: space-between;

				.checktype {
					display: flex;
					justify-content: space-between;
					width: 300rpx;
					// background-color: #4399FC;
					padding: 20rpx;
					border: 1px solid #C0C0C0;
					border-radius: 20rpx;

				}
			}

		}

		.lession-list {
			margin-top: 90rpx;
			margin-bottom: 160rpx;
			padding: 20rpx 0;

			.item {
				margin: 10rpx 0;
				padding: 20rpx;
				border: 1px solid #C0C0C0;
				border-radius: 20rpx;
				position: relative;

				.price {
					width: 150rpx;
					position: absolute;
					top: 20rpx;
					right: 20rpx;
				}
			}
		}

		.pos-btn {
			position: fixed;
			bottom: 0rpx;
			left: 0;
			right: 0;
			width: 100%;
			background-color: #fff;
			padding: 20rpx 0rpx 30rpx 0rpx;

			.total {
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				border-radius: 40rpx;
				margin-right: 50rpx;
				padding: 0 40rpx;
				border: 1rpx solid #ffaa7f;
				color: #fff;
				background-image: linear-gradient(to right, #ffaa7f, #ff5500);
			}
		}

	}
</style>
